<template>
  <div id="app">
    <el-card shadow="hover">
      <div slot="header" id="head">
        <el-button-group style="float: left" >
          <el-button type="primary" size="small" @click="dialogVisible = true">
            <i class="el-icon-plus el-icon--right"></i>添加用户</el-button>
          <el-button type="primary" icon="el-icon-refresh-right" size="small" @click="fresh">刷新页面</el-button>
          <el-button type="danger"  icon="el-icon-delete" size="small" @click="handleDelete">批量删除</el-button>
        </el-button-group>

        <el-dialog title="添加用户" :visible.sync="dialogVisible">
          <el-form :model="addDate">
            <el-form-item label="名称：" :label-width="formLabelWidth" placeholder="请输入名称"
                          :rules="[{ required: true, message: '名称不能为空'}]">
              <el-input v-model="addDate.name" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="price"
                          :label-width="formLabelWidth"
                          :rules="[{ required: true, message: '密码不能为空'}]">
              <el-input v-model.number="addDate.password" autocomplete="off"  type="password"></el-input>

            </el-form-item>
            <el-form-item label="手机号：" :label-width="formLabelWidth" placeholder="请输入手机号">
              <el-input v-model="addDate.phone" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="身份证号：" :label-width="formLabelWidth" placeholder="请输入身份证号">
              <el-input v-model="addDate.idNumber" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="性别：" :label-width="formLabelWidth" placeholder="请输入性别">
              <el-input v-model="addDate.sex" autocomplete="off" ></el-input>
            </el-form-item>

          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
            <el-button type="success" @click="add">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <div id="show">
        <el-table   border
                    :data="userList"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              label="用户编号"
              prop="id"
              align="center"
              width="180">
          </el-table-column>
          <el-table-column
              label="用户名称"
              align="center"
              prop="name">
          </el-table-column>
          <el-table-column
              label="用户手机号"
              align="center"
              prop="phone">
          </el-table-column>
          <el-table-column
              label="用户身份证号"
              align="center"
              prop="idNumber">
          </el-table-column>
          <el-table-column
              label="用户性别"
              align="center"
              prop="sex">
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button-group >
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    icon="el-icon-edit">编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    icon="el-icon-delete">删除</el-button>
              </el-button-group>

              <el-dialog title="修改用户信息" :visible.sync="dialogVisible2">
                <el-form :model="upDate">
                  <el-form-item label="用户编号：" :label-width="formLabelWidth" readonly>
                    <el-input v-model="upDate.id" autocomplete="off" ></el-input>
                  </el-form-item>
                  <el-form-item label="用户名称：" :label-width="formLabelWidth">
                    <el-input v-model="upDate.name" autocomplete="off" ></el-input>
                  </el-form-item>
                  <el-form-item label="用户密码：" :label-width="formLabelWidth">
                    <el-input v-model="upDate.password" autocomplete="off" type="password"></el-input>
                  </el-form-item>
                  <el-form-item label="用户手机号：" :label-width="formLabelWidth">
                    <el-input v-model="upDate.phone" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="用户身份证号：" :label-width="formLabelWidth">
                    <el-input v-model="upDate.idNumber" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="用户性别：" :label-width="formLabelWidth">
                    <el-input v-model="upDate.sex" autocomplete="off"></el-input>
                  </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="dialogVisible2 = false">取 消</el-button>
                  <el-button type="success" @click="updateStudent">确 定</el-button>
                </div>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

<script>
import user from "@/api/user";
import order from "@/api/order";

export default {
  data(){
    return{
      userList:[],          // 当前页的所有用户信息集合
      orderList:[],          // 班级信息
      dialogVisible: false, //添加用户对话框
      addDate:{
        name:'',
        password:'',
        phone:'',
        idNumber:'',
        sex:''
      },
      dialogVisible2: false,//编辑用户对话框
      upDate:{
        name:'',
        password:'',
        phone:'',
        idNumber:'',
        sex:''
      },
      ids:[],//删除组
      selections:[],//多选信息
      typesAll:'所有订单',
      formLabelWidth:'120px',
      addDate2:{//order
        product:'',
        num:'',
        money:'',
        userId:'',
      },
      updateDate2:{//order
        product:'',
        num:'',
        money:'',
        userId:'',
      },
    }
  },

  created(){
    this.listUser()
    this.listOrder()
  },

  methods:{
    /**
     * 用户查询
     * @returns {Promise<void>}
     */
    async listUser() {
      const {data: res} = await user.list()
      this.userList = res.rows.user
    },

    /**
     * 查询订单
     * @returns {Promise<void>}
     */
    async listOrder(){
      const {data:res} = await order.list()
      this.orderList = res.data.order
    },


    /**
     * 添加用户(同时添加订单)
     * @returns {Promise<void>}
     */
    async add() {
      const {data: res} = await user.add(this.addDate)
      await this.addOrder()
      if (res.code === 200) {//添加成功
        this.$message({
          type: 'success',
          message: res.message
        })
        //关闭对话框
        this.dialogVisible = false
        //刷新页面
        await this.listUser()

      } else {//添加失败
        this.$message({
          type: 'error',
          message: res.message
        })
        //关闭对话框
        this.dialogVisible = false
        await this.listUser()
      }
    },

    /**
     * 添加订单
     * @returns {Promise<void>}
     */
    async addOrder() {
      const {data: res} = await order.add(this.addDate2)
    },

    /**
     * 编辑用户信息-->给更新用户信息提供参数
     * @param index
     * @param row
     */
    handleEdit(index, row) {
      console.log(index, row);
      this.upDate.id=row.id;
      this.upDate.name=row.name;
      this.upDate.password=row.password;
      this.upDate.phone=row.phone;
      this.upDate.sex=row.sex;
      this.upDate.idNumber=row.idNumber;
      this.dialogVisible2 = true;
    },

    /**
     * 更新用户信息
     * @returns {Promise<void>}
     */
    async updateStudent() {
      const {data: res} = await user.update(this.upDate)
      if (res.code === 200) {//修改成功
        this.$message({
          type: 'success',
          message: res.message
        })
        this.dialogVisible2 = false;
        await this.listUser();
      } else {//修改失败
        this.$message({
          type: 'error',
          message: res.message
        })
        //关闭对话框
        this.dialogVisible2 = false
        //刷新页面
        await this.listUser()
      }
    },

    /**
     * 批量或单个删除用户
     * @param index
     * @param row
     */
    handleDelete(index, row){
      this.ids = []
      if(row){
        this.ids.push(row.id)
      }else{
        this.ids = this.selections.map(m => m.id)
      }
      this.$confirm(`此操作将永久删除编号为${this.ids}的用户,是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const {data: res} = await user.delete(this.ids)
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.message
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
        await this.listUser()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    /**
     * 多选改变事件
     * @param val
     */
    handleSelectionChange(val) {
      this.selections = val;
      console.log(this.selections)
    },

    /**
     * 刷新界面
     */
    fresh(){
      this.listUser()
    },
  },


}
</script>